<template>
  <div class="md-editor">
    <p v-if="draftDate" class="draft-hint">上次保存时间为: {{ draftDate }}</p>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-input
          resize="none"
          v-model="rawContent"
          type="textarea"
          placeholder="请开始你的作文"
          :rows="30"
          @input="updateValue"
          @keydown.native="save"
          @mousewheel.native="scrollEditor"
        ></el-input>
      </el-col>
      <el-col :span="12">
        <div class="md-preview" v-html="mdContent" ref="preview"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import MarkdownIT from 'markdown-it';

  const MD = new MarkdownIT({
    html: true,
    xhtmlOut: true,
    breaks: true,
    linkify: true,
  });

  const NEW_DRAFT_NAME = 'mt-article-newone';

  export default {
    props: {
      value: {
        type: String,
        default: '',
      },
      editId: {
        type: [String, Number],
        default: '',
      },
    },
    data() {
      return {
        draftDate: '',
        rawContent: this.value,
        storageName: NEW_DRAFT_NAME,
      };
    },
    watch: {
      value() {
        this.rawContent = this.value;
      },
    },
    computed: {
      mdContent() {
        return [MD.render(this.rawContent)].join('');
      },
    },
    mounted() {
      this.getDraft();
    },
    methods: {
      /**
       * 更新数据
       */
      updateValue() {
        this.$emit('input', this.rawContent);
      },
      getDraft(onlyTime) {
        const draft = window.localStorage.getItem(this.storageName);
        try {
          const draftObj = JSON.parse(draft);
          if ((this.editId && this.editId === draftObj.editId) || !this.editId) {
            if (draftObj) {
              // 是不是只拿时间, 如果只拿时间的话就不拿草稿覆盖了
              if (!onlyTime) {
                this.rawContent = draftObj.rawContent;
                this.updateValue();
              }
              this.draftDate = draftObj.date;
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      save(evt) {
        if (evt.keyCode === 83 && (navigator.platform.match('Mac') ? evt.metaKey : evt.ctrlKey)) {
          evt.preventDefault();

          this.draftDate = new Date().toLocaleString();
          window.localStorage.setItem(
            this.storageName,
            JSON.stringify({ date: this.draftDate, rawContent: this.rawContent, id: this.editId }),
          );
          this.$message.success('草稿保存成功');
        } else {
          this.scrollEditor();
        }
      },
      /**
       * 滚动同步
       */
      scrollEditor(evt) {
        this.$refs.preview.scrollTo(0, evt.target.scrollTop * 1.5);
      },
    },
  };
</script>

<style lang="less" scoped>
  .md-editor {
    max-height: 1000px;

    .draft-hint {
      font-size: 12px;
      margin-bottom: 10px;
      color: #259624;
    }

    /deep/ .el-input--mini {
      font-size: 16px;
    }

    .el-row {
      flex: 1;

      .el-col {
        height: 100%;
      }
    }
  }
</style>
<style lang="less">
  .md-preview {
    border: 1px solid #dcdfe6;
    padding: 10px 20px;
    flex: 1;
    background-color: #0e0e0e;
    color: #cccccc;
    box-sizing: border-box;
    height: 732px;
    line-height: 24px;
    overflow: scroll;

    h1 {
      font-size: 24px;
      color: white;
      margin-bottom: 30px;
    }

    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      font-size: 16px;
      margin-bottom: 35px;
    }
  }
</style>
